import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import { Button } from 'ant-design-vue'
import type { CustomDto } from '@/api/company/types'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import type { PageDto } from '@/api/types'
import type { AnyObject } from '@/types'
import { getOpenEnsureList } from '@/api/openEnsure'
import type { InsureCompanyDetailDto } from '@/api/insCompany/types'
import type { OpenEnsureDto } from '@/api/openEnsure/types'
@Component
export class CustomerProductsView extends TableRender {
    @Prop() detailData!: InsureCompanyDetailDto

    noFilterPadding = true
    noTablePadding = true
    tableColumnConfigOld = () =>
        [
            {
                field: 'companyId',
                title: '客户产品ID'
            },
            {
                field: 'companyName',
                title: '客户名称'
            },
            {
                field: 'balance',
                title: '账户余额'
            },
            {
                field: 'insureEmployeeCount',
                title: '在保员工'
            },
            {
                field: 'createTime',
                title: '建档时间'
            }
        ] as TableRenderColumnTypes<OpenEnsureDto>

    filterConfig() {
        return {
            name: {
                name: '搜索',
                element: 'input',
                placeholder: '只能搜索保司ID和保司名称'
            }
        }
    }

    formConfig = this.initFormConfig() as FormModalDto

    initFormConfig() {
        return {
            title: '工种复审',
            width: '450px',
            theme: 'dark',
            show: false,
            params: {
                confirmText: '确定'
            },
            items: {
                insuranceId: {
                    name: '复审保司',
                    element: 'select',
                    required: true,
                    remote: true
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                console.log(data, 'datadata')
                this.formConfig.show = false
            },
            cancel: () => {
                this.formConfig.show = false
            }
        } as FormModalDto
    }

    onOpenPop() {
        console.log('打开弹窗')
        this.formConfig.show = true
    }

    onLoadData(pageNum: number, pageSize: number, filters: AnyObject) {
        console.log(1234, this.detailData)
        if (!this.detailData?.id) return []
        return getOpenEnsureList({
            pageNum,
            pageSize,
            companyId: this.detailData.id,
            ...filters
        })
    }

    render() {
        return (
            <div class="h-full flex flex-col">
                {/* <div class="flex-none flex justify-between items-center">
                    <div class="flex-1">{this.renderFilter()}</div>
                    <Button type="primary" onClick={ this.onOpenPop }>工种复审</Button>
                </div>
                <div class="flex-1">
                    {this.renderTable()}
                </div>
                <div class="flex-none">
                    {this.renderPager()}
                </div> */}
                {super.render()}
                {renderModal(this.formConfig)}
            </div>
        )
    }
}

export default toNative<{ detailData: InsureCompanyDetailDto }, {}>(CustomerProductsView)
